<template>
  <!-- 撤回商标注册证申请 -->
  <div class="total">
    <h1>撤回商标注册申请申请书</h1>
    <el-form :label-position="right" label-width="250px" size="mini">
      <el-form-item label="申请人名称(中文) :">
        <span>{{record.appName}}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{record.appNameEn}}</span>
      </el-form-item>
      <el-form-item label="申请人地址(中文) :">
        <span>{{record.appAddCn}}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{record.appAddEn}}</span>
      </el-form-item>
      <el-form-item label="邮政编码 :">
        <span>{{record.postCode}}</span>
      </el-form-item>
      <el-form-item label="联系人 :">
        <span>{{record.contacts}}</span>
      </el-form-item>
 <el-form-item label="邮箱 :">
        <span>{{record.email}}</span>
      </el-form-item>

      <el-form-item label="电话 :">
        <span>{{record.phone}}</span>
      </el-form-item>
      <el-form-item label="代理机构名称 :">
        <span>{{record.deptName}}</span>
      </el-form-item>
      <el-form-item label="原商标申请号 :">
        <span>{{record.appNum}}</span>
      </el-form-item>
      <el-form-item label="撤回理由 :">
        <span>{{record.reasons}}</span>
      </el-form-item>

      <el-form-item label="营业执照 :">
         <imgshow> <img class="license" :src="this.mconfig.host + record.busimg" alt />
        </imgshow>
      </el-form-item>

      <el-form-item label="身份证(正反面) :" v-if="record.idcardimg !== ''">
        <imgshow> <img class=" identity" :src="this.mconfig.host + record.idcardimg" alt />
        </imgshow>
      </el-form-item>

      <el-form-item label="网上确认书 :">
         <imgshow> <img class="license" :src="this.mconfig.host + record.qrfile" alt />
        </imgshow>
      </el-form-item>
      <el-form-item label="其他附件 :" v-if="record.otherfile.length > 0">
        <imgshow v-for="item, index in record.otherfile" :key="index"> <img class="license" :src="mconfig.host + item" alt />
        </imgshow>
      </el-form-item>
    </el-form>
    <!-- 签字/章戳 -->
    <div class="signs">
      <!-- <div class="sign">
        <div>
          <span>申请人章戳 (签字) :</span>
        </div>
        <div>
          <span>代理机构章戳 :</span>
        </div>
      </div>
      <div class="agent">
        <p>代理人签字 :</p>
      </div>
      <p class="careful">注：请 按 说 明 填 写</p> -->
    </div>

    <!-- <div class="additional">
      <h2>
        撤回商标注册申请申请书
        <br />（附页）
      </h2>
      <el-form :label-position="right" label-width="250px">
        <el-form-item label="其他共同申请人名称列表:">
          <el-input v-model="record.comm_name" v-if="HideDisplay" class="sizes"></el-input>
        </el-form-item>
      </el-form>
    </div> -->
  </div>
</template>
<script>
import imgshow from '../common/imgshow'
export default {
   components:{
    imgshow
    },
  name: "businessForm7",
  data() {
    return {
      modify: "修改",
      HideDisplay: false,
      right: "right",
      record: {
        id: "", //主键
        isComms: "", // 是否共有商标
        ageName: "", // 代理机构名称
        appAddCn:"",//申请人地址（中文）
        appAddEn: "", //   申请人地址（英文）
        appNameCn: "", //  申请人名称（中文）
        appName: "", //  申请人名称（英文）
        appNum: "", // 原商标申请号
        branchNetworkId: "", //  网点编号
        comm_name: "", //其他共同申请人名称列表
        contacts: "", //  联系人
        img_path: "", //图片地址
        phone: "", //  电话
        postCode: "", //  邮政编码
        proAppendJson: "", //  共享人 json
        reasons: "", //撤回理由
        subStatus: "1", //   状态 1保存 2选择通过 3选择未通过 4未审核
        userId: "", //  用户id
        busimg:"",//营业执照
        idcardimg:"",//身份证(正)
        idcardface:"",//身份证(反)
        // idcards:"身份证(正反面)"
      },
    };
  },
  methods: {
    //接口获取到数据
    interface(e) {
      this.$http
        .get("/trademark/proTWithdraw/findByIdDetl", {
         params: { id: e },
        })
        .then((res) => {
            // console.log(res)
            this.record = res.data.data.data
            this.record.otherfile = JSON.parse(this.record.otherfile);
            console.log(this.record.busimg);
            // console.log(this.record.appNameEn)
        });
    },
  },
  mounted() {
    // this.record.busimg = this.mconfig.host + record.busimg(",")[0];
    this.id = this.$route.query.id;
    this.interface(this.id);
    this.record = this.$store.state.storeDatas;
    console.log(this.$store.state.storeDatas, 999);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.total {
  width: 1200px;
  /* margin: 0 auto; */
  margin-left: -60px;

}
.total h1 {
  padding: 30px 0 20px 0;
  text-align: center;
  font-weight: 500;
  font-size: 30px;
  color: #000;
  letter-spacing: 0.4em;
}
.el-form {
  margin-left: 248px;
}
.total .el-form-item {
  margin-bottom: 0;
}
.choice span {
  margin-left: 50px;
}
/* 签字 */
.signs {
  margin-top: 150px;
}
.sign {
  display: flex;
  justify-content: center;
}
.sign div {
  width: 300px;
  margin: 15px;
  margin-left: 80px;
}
.sign div span {
  color: #999;
}
.el-form-item{
  padding: 6px 0;
}
/* 代理人 */
.signs .agent {
  margin-top: 80px;
  margin-right: 460px;
  text-align: right;
  color: #999;
}
.signs .careful {
  margin-top: 100px;
  margin-left: 310px;
  color: #999;
}

/* 附加页 */
.additional {
  margin-top: 150px;
  height: 800px;
}
.additional h2 {
  text-align: center;
  margin-bottom: 40px;
  font-weight: 500;
  font-size: 26px;
  color: #666;
  letter-spacing: 0.5em;
}
/* 修改 */
.signs[data-v-1a8f90d4]{
  margin-top: initial;
}
.additional[data-v-1a8f90d4]{
  margin-top: 80px;
}
.additional h2[data-v-1a8f90d4]{
  margin-bottom: 20px;
}
.license{
  /* width: 500px; */
}
.identity{
  display: inline-block;
  margin: 0 5px;
  /* width: 350px; */
}
</style>
